import React, { Component } from 'react'
import { Row, Col, Button, Modal, Input, message } from 'antd'
import accountType from './AccountType.module.css'
import { FormOutlined, ToTopOutlined, DeleteOutlined,ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal
export default class AccountType extends Component {
    constructor(props) {
        super(props)
        this.state = {
            accountList: [
                { id: 1, accountName: '哈哈哈' }, { id: 2, accountName: '嘿嘿嘿' }, { id: 3, accountName: '呵呵呵' }, { id: 4, accountName: '啊啊啊' },
                { id: 5, accountName: '嗷嗷嗷' }, { id: 6, accountName: '啦啦啦' }, { id: 7, accountName: '滴滴滴' }, { id: 8, accountName: '嘻嘻嘻' },
                { id: 9, accountName: '冲冲冲' }, { id: 10, accountName: '急急急' }, { id: 11, accountName: '嘤嘤嘤' }, { id: 12, accountName: '去去去' },
            ]
        }
    }
    showNewAccountModule = () => {
        this.setState({
            isShowNewAccount: true
        })
    }
    
    handelNewChange = (e) => {
        let val = e.target.value.replace(/\s+/g, "")//获取属性值
        this.setState({
            newAccountName: val
        })
    }
    confirmNew = () => {
        // 向服务器发起请求存储商品品牌
        if (this.state.newAccountName === undefined || this.state.newAccountName === '') {
            message.error('请输入账期类型！！！')
        } else {
            // 向服务器发起请求存储商品品牌
            this.setState({
                isShowNewAccount: false,
                newAccountName: '',
            })

        }

    }
    handleNewCancel = () => {
        this.setState({
            isShowNewAccount: false
        })
    }

    // 修改品牌
    editAccount = (id) => {
        let arr = JSON.parse(JSON.stringify(this.state.accountList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].id === id) {
                this.setState({
                    editAccountName: arr[i].accountName
                })
            }
        }
        this.setState({
            isShowEditAccount: true
        })
    }
    handelEditChange = (e) => {
        let val = e.target.value.replace(/\s+/g, "")//获取属性值
        this.setState({
            editAccountName: val
        })
    }
    confirmEdit = () => {
        console.log(this.state.editAccountName, 66)
        if (this.state.editAccountName === '') {
            message.error('请输入账期类型！！！')
        } else {
            this.setState({
                isShowEditAccount: false
            })
        }

    }
    handleEditCancel = () => {
        this.setState({
            isShowEditAccount: false
        })
    }
    // 置顶品牌
    toTop = (id) => {
        let arr = JSON.parse(JSON.stringify(this.state.accountList))
        for (let i = 0; i < arr.length; i++) {
            if (arr[i].id === id) {
                let obj = arr[i];
                arr.splice(i, 1);
                arr.unshift(obj);
            }
        }
        this.setState({
            accountList: arr
        }, () => {
            message.info('操作成功！！')
        })

    }
    // 删除品牌
    deleteBrand(id) {
        // 向服务器发起请求删除品牌
        let that = this;
        confirm({
            title: '确定删除此账期类型?',
            icon: <ExclamationCircleOutlined />,
            // content: 'Some descriptions',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                let arr = JSON.parse(JSON.stringify(that.state.accountList))
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].id === id) {
                        arr.splice(i, 1);
                    }
                }
                that.setState({
                    accountList: arr
                }, () => {
                    message.info('操作成功！！')
                })
            },
            // onCancel() {
            //   console.log('Cancel');
            // },
          });
        

    }
    render() {
        return (
            <div className={accountType.content}>
                <Row className={accountType.btnBox}>
                    <Col span={24}>
                        <Button type="primary" className={accountType.newClassify}
                            onClick={this.showNewAccountModule}>新增</Button>
                        <Modal
                            title="新增账期类型"
                            visible={this.state.isShowNewAccount}
                            onOk={this.confirmNew}
                            cancelText={'取消'}
                            okText={'确定'}
                            onCancel={this.handleNewCancel}
                        >
                            <div>
                                <span className={accountType.newTips}> <span>*</span> 账期类型</span>
                                <Input className={accountType.newAccountName}
                                    value={this.state.newBrandName} onChange={this.handelNewChange} />
                            </div>
                        </Modal>
                    </Col>
                </Row>
                {this.state.accountList.map(item => <Row className={accountType.account} key={item.id}>
                    <Col span={12}> <span className={accountType.accountName}>{item.accountName}</span></Col>
                    <Col span={12}>
                        <div className={accountType.operate}>
                            <button onClick={() => { this.editAccount(item.id) }}><FormOutlined className={accountType.operateIcon} />修改</button>
                           
                            <button onClick={() => { this.toTop(item.id) }}><ToTopOutlined className={accountType.operateIcon} />置顶</button>
                            <button onClick={() => { this.deleteBrand(item.id) }} ><DeleteOutlined className={accountType.operateIcon} />删除</button>
                        </div>
                    </Col>
                </Row>)}
                <Modal
                    maskStyle={{ backgroundColor: 'rgba(0,0,0,.02)' }}
                    title="修改商品品牌"
                    visible={this.state.isShowEditAccount}
                    onOk={this.confirmEdit}
                    cancelText={'取消'}
                    okText={'确定'}
                    onCancel={this.handleEditCancel}
                >
                    <div>
                        <span className={accountType.newTips}> <span>*</span> 品牌名称</span>
                        <Input className={accountType.newAccountName}
                            value={this.state.editBrandName} onChange={this.handelEditChange} />
                    </div>
                </Modal>
            </div>
        )
    }
}
